<template>
    <view style="height: 100%">
        <movable-area class="container" :style="'width: ' + width + 'rpx; height: ' + height + 'rpx;'">
            <movable-view
                direction="horizontal"
                class="movable-content"
                :out-of-bounds="out"
                damping="20"
                :disabled="disabled"
                :x="x"
                :style="'width: ' + (width + slideWidth) + 'rpx; height: ' + height + 'rpx;'"
                inertia
                @touchend="onTouchEnd"
                @touchstart="onTouchStart"
                @change="onChange"
            >
                <view class="left" :style="'width: ' + width + 'rpx; height: ' + height + 'rpx;'">
                    <slot name="left"></slot>
                </view>
                <view class="right" mut-bind:tap="onRightTap" :style="'width: ' + slideWidth + 'rpx; height: ' + height + 'rpx;'">
                    <slot name="right"></slot>
                </view>
            </movable-view>
        </movable-area>
    </view>
</template>

<script>
const _windowWidth = uni.getSystemInfoSync().windowWidth;
export default {
    data() {
        return {
            viewWidth: _windowWidth,
            x: 0,
            out: false
        };
    },

    options: {
        multipleSlots: true
    },

    props: {
        width: {
            type: Number,
            default: _windowWidth
        },
        height: {
            type: Number,
            default: 100
        },
        slideWidth: {
            type: Number,
            default: 0
        },
        threshold: {
            type: Number,
            default: 0
        },
        disabled: {
            type: Boolean,
            default: false
        },
        autoClose: {
            type: Boolean,
            default: false
        },
        close: {
            type: Boolean,
            default: false
        }
    },

    mounted() {
        // 处理小程序 ready 生命周期
        this.$nextTick(() => this.ready());
    },

    methods: {
        ready() {
            this.updateRight();
        },

        updateRight() {
            const that = this;
            uni.createSelectorQuery()
                .in(this)
                .select('.right')
                .boundingClientRect(function (e) {
                    that._slideWidth = e.width;
                    let i = e.width <= 50 ? e.width : 50;
                    if (that.threshold) {
                        that._threshold = that.threshold;
                    } else {
                        that._threshold = i;
                    }
                    that._viewWidth = that.width + e.width * (750 / _windowWidth);
                    that.setData({
                        viewWidth: that._viewWidth
                    });
                })
                .exec();
        },

        onTouchStart(t) {
            this._startX = t.changedTouches[0].pageX;
        },

        onTouchEnd(t) {
            if (this.disabled) {
                return;
            }
            this._endX = t.changedTouches[0].pageX;
            this._length = this._endX - this._startX;
            const { _endX: e, _startX: i, _threshold: s } = this;
            if (this._length > s) {
                this.setData({
                    popup: false,
                    x: 0
                });
                this.onCloseTap();
            }
            (e > i && false === this.out) ||
                (i - e >= s
                    ? (this.setData({
                          x: -this._slideWidth,
                          popup: true,
                          closeClone: false
                      }),
                      this.onOpenTap())
                    : (i - e < s && i - e > 0 && true !== this.popup) || e - i >= s
                    ? (this.setData({
                          x: 0
                      }),
                      this.onCloseTap())
                    : e - i < s &&
                      e - i > 0 &&
                      (this.setData({
                          x: -this._slideWidth,
                          closeClone: false
                      }),
                      this.onOpenTap()));
        },

        onChange(t) {
            if (!this.out && t.detail.x < -this._threshold) {
                this.setData({
                    out: true
                });
            } else {
                if (this.out && t.detail.x >= -this._threshold) {
                    this.setData({
                        out: false
                    });
                }
            }
        },

        onRightTap() {
            if (this.autoClose) {
                this.setData({
                    popup: false,
                    x: 0
                });
                this.onCloseTap();
            }
            this.$emit(
                'lintap',
                {
                    detail: 'click right'
                },
                {
                    bubbles: true,
                    composed: true
                }
            );
        },

        onOpenTap() {
            this.$emit(
                'slideopen',
                {
                    detail: true
                },
                {
                    bubbles: true,
                    composed: true
                }
            );
        },

        onCloseTap() {
            this.$emit(
                'slideclose',
                {
                    detail: false
                },
                {
                    bubbles: true,
                    composed: true
                }
            );
        }
    },

    created: function () {}
};
</script>
<style>
.movable-content {
    display: flex;
    direction: row;
    overflow: hidden;
}
.container {
    overflow: hidden;
}
</style>
